<!--
*  功能描述：申请日历页面
 -->
<template>
  <div>
        <div>
    <el-calendar>
      <template slot="dateCell" slot-scope="{ data }">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split("-").slice(1).join("-") }}
          {{ data.isSelected ? "✔️" : "" }}
          <span class="index01">
            <a class="index02" href="#" @click="Zhuan">申请</a>
          </span>
          <br />
          <br />
          <span v-for="(item, index) in tableData" :key="index">
            <span class="index03">
              <a
                @click="Xian(item)"
                v-if="data.day == item.BeginLeaveTime.substring(0, 10)"
                href="#"
                class="index04"
                >待审批</a
              >
            </span>
          </span>
        </p>
      </template>
    </el-calendar>

    <el-dialog title="申请" :visible.sync="dialogVisible" width="50%">
      <span slot="footer" class="dialog-footer">
        <el-table :data="tableDatas" border style="width: 100%">
          <el-table-column prop="Clocking_inState" label="申请状态">
          </el-table-column>
          <el-table-column prop="ApplyForTpe" label="申请类型">

          </el-table-column>
          <el-table-column prop="LeaveReason" label="申请原因"> </el-table-column>
          <el-table-column prop="BeginLeaveTime" label="开始时间"> </el-table-column>
          <el-table-column prop="FinishLeaveTime" label="结束时间"> </el-table-column>
          <el-table-column prop="StatisticsTime" label="考勤统计"> </el-table-column>
          <el-table-column prop="ApplyForRemark" label="备注"> </el-table-column>
        </el-table>
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //显示获取所有数据
      tableData: [],
      //拟态框参数
      dialogVisible: false,
      tableDatas: [],
    };
  },
  mounted() {
    //显示
    // this.Get();
  },
  methods: {
    //申请页面
    Zhuan() {
      this.$router.push("/addRequest");
    },
    ////显示
    // Get() {
    //   this.$axios({
    //     url: "http://localhost:7850/api/Attendance/GetClocking_inApplyFo",
    //     method: "get",
    //   }).then((res) => {
    //     this.tableData = res.data;
    //   });
    // },
    ////获取当前的数据
    // Xian(item) {
    //   this.dialogVisible = true;
    //   this.$http({
    //     url: "http://localhost:7850/api/Attendance/EditClocking_inApplyFo",
    //     method: "get",
    //     params: {
    //       ApplyForId: item.ApplyForId,
    //     },
    //   }).then((res) => {
    //     this.tableDatas = res.data;
    //   });
    // },
  },
};
</script>

<style scoped>
.is-selected {
  color: #1989fa;
}
.index01 {
  color: blue;
  font-size: 5px !important;
}
.index02 {
  float: right;
  text-decoration-line: none;
}
.index03 {
  float: left;
  font-size: 5px !important;
}
.index04 {
  text-decoration-line: none;
  color: red;
}
</style>